<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img{
				height: 160px;
				width: 220px;
			}
		</style>
		<script type="text/javascript">
			// dom操作,进行节点的复制
			function copyImg(){
				// 获取赋值的节点对象
				var imgNode = document.getElementById("img1");
				// 使用dom的克隆方法,克隆一个当前节点对象
				var imgNodeNew = imgNode.cloneNode(false); // 参数表示是否克隆该节点的子孙节点;false:不可隆;true:克隆子孙节点
				// 将新节点插入到dom文档流中
				document.getElementById("imgdiv").appendChild(imgNodeNew);
			}
			// dom操作,新增节点
			function addImg(){
				// 创建一个dom对象				
				var imgNodeNew = document.createElement("img"); 
				// 设置新增节点属性和样式
				//imgNodeNew.setAttribute("src","img/photo_3.jpg");
				imgNodeNew.src = "img/photo_3.jpg";
				// 注意:style属性后面的时css样式名,=后面是该样式的值
				imgNodeNew.style.border = "red solid 1px";
				// 将新节点插入到dom文档流中
				document.getElementById("imgdivnew").appendChild(imgNodeNew);
			}
			
		</script>
	</head>
		<body>
			<h3>创建并插入节点</h3>
			<input id="copyBtn" type="button" value="复制图像" onclick="copyImg()" />
			<input id="addBtn" type="button" value="增加图像" onclick="addImg()" /><br>
			<img id="img1" src="img/photo_2.jpg" border="1" alt="图书五折">
			<div id="imgdiv">
				
			</div>
			<div id="imgdivnew">
				
			</div>
	</body>
</html>
